<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位-2</title>
  <style>

    .box{
      width: 100px;
      height: 100px;
      border: 1px solid;
      margin-left: 10px;

      text-align: center;
      line-height: 100px;

    }

    .left {
        float: left;
    }


    .long-container {
       width: 260px;
       height: 100px;
       margin-top: 60px;
    }


    .inline-box {
       display: inline-block;
    }

    .box-3{
       position: relative;
       left:60px
    }

    .box-5{
      position: relative;
      left:60px
    }


    .box-1{
        position: relative;
        top:240px;
        left:80px;
    }
  </style>
</head>
<body>


<div class="box box-1">1</div>
<div class="long-container">
  <div class="box inline-box">2</div>
  <div class="box inline-box box-3">3</div>
</div>
<div class="long-container">

  <div class="box inline-box">4</div>
  <div class="box inline-box box-5">5</div>
</div>

</body>
</html>